<template>
  <grimm-page type="button-view" title="Button">
    <template slot="content">
      <grimm-button-group>
        <grimm-button type="primary">主要操作</grimm-button>
        <grimm-button type="primary" disabled>主要禁用</grimm-button>
      </grimm-button-group>
      <grimm-button-group>
        <grimm-button>一般操作(default)</grimm-button>
        <grimm-button disabled>一般禁用</grimm-button>
      </grimm-button-group>
      <grimm-button-group>
        <grimm-button type="secondary">次要操作</grimm-button>
        <grimm-button type="secondary" disabled>次要禁用</grimm-button>
      </grimm-button-group>
      <grimm-button-group>
        <grimm-button type="primary" size="large">large size</grimm-button>
        <grimm-button size="medium">medium size</grimm-button>
        <grimm-button type="secondary">default size</grimm-button>
        <grimm-button size="mini">mini size</grimm-button>
        <grimm-button type="primary" block>block</grimm-button>
      </grimm-button-group>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
import GrimmButtonGroup from '../../components/GrimmButtonGroup.vue';
export default {
  data() {
    return {};
  },
  components: {
    GrimmPage,
    GrimmButtonGroup,
  },
};
</script>
